<template>
  <el-row type="flex" class="row-bg" justify="center">
    <!-- <el-col :xl="6" :lg="7">
      <h2>欢迎来到精转通scrm管理系统</h2>
    </el-col> -->
    <!-- <h2 class="title">精转通scrm管理系统</h2> -->
    <!-- <el-col :span="1">
      <el-divider direction="vertical"></el-divider>
    </el-col> -->
    <el-col :xl="6" :lg="7" class="from-box">
      <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="80px">
        <el-form-item label="用户名" prop="name" style="width: 380px">
          <el-input v-model="loginForm.name"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pwd" style="width: 380px">
          <el-input v-model="loginForm.pwd" type="password"></el-input>
        </el-form-item>
        <!-- <el-form-item label="验证码" prop="rand" style="width: 380px">
          <el-input
            v-model="loginForm.rand"
            style="width: 172px; float: left"
            maxlength="5"
          ></el-input>
          <el-image :src="captchaImg" class="captchaImg" @click="getCaptcha"></el-image>
          <el-button type="primary" class="captchaImg" @click="getCode"
            >获取验证码</el-button
          >
        </el-form-item>-->

        <el-form-item>
          <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
          <el-button @click="resetForm('loginForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
import qs from "qs";
export default {
  name: "Login",

  data() {
    return {
      showCode: "",
      loginForm: {
        name: "",
        pwd: "",
        // rand: "",
        // token: '',
        // remePwd: 1,
      },
      rules: {
        name: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        pwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
        rand: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          { min: 4, max: 4, message: "长度为 4 个字符", trigger: "blur" },
        ],
      },
      captchaImg: null,
    };
  },
  created() {
    this.keyupSubmit();
  },
  methods: {
    keyupSubmit() { 
      document.onkeydown = (e) => {
        let _key = window.event.keyCode;
        if (_key === 13&&!this.clickState) {
          this.submitForm('loginForm');
        }
      };
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post("admin/index/login", this.loginForm).then((res) => {
            const jwt = Date.now();
            this.$store.commit('SET_TOKEN', jwt)
            this.$store.commit('SET_USER', res.data.data)
            this.$router.push("/index");
          });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // getCode() {
    //   let data = {
    //     name: this.loginForm.name,
    //     pwd: this.loginForm.pwd,
    //   };
    //   this.$axios.post("api/Index/send_sms", { ...data }).then((res) => {
    //     console.log(res);
    //     this.showCode = res.data.msg;
    //   });
    // },
  }
};
</script>

<style scoped>
.el-row {
  background-color: #fafafa;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-divider {
  height: 200px;
}

.captchaImg {
  float: left;
  margin-left: 8px;
  border-radius: 4px;
}
.row-bg {
  background: url('../assets/img/loginbody_img_05.jpg') no-repeat center,linear-gradient(#0c5edc 50%,#0c58d0 50%);
  padding-left: 40%;
}
.from-box {
  position: relative;
  width: 410px;
  background-color: #fff;
  padding: 45px 30px 30px 0;
  border-radius: 6px;
}
.title {
  position: fixed;
  top: 80px;
  left: 44%;
  color: #fff;
  letter-spacing:3px;
}
</style>